<template>
  <div class="app-container">
    <div class="data-container">
      <draggable v-model="dataList" :dragOptions="{ ghostClass: 'ghost'}" tag="transition-group" item-key="id"
                 :component-data="{name:'fade',type: 'transitions'}">
        <template #item="{ element }">
          <div class="data-container-item">
            <data-card class="data-card" @refresh="dataRefresh" :itemid="element.id">
              <template #header-extra>
                <n-tag :type="element.type">{{ element.name }}</n-tag>
              </template>
              <template #default>
                <div class="data-number">
                  <count-to :prefix="element.prefix" :end-val="element.num"></count-to>
                  <render-template :render="element.detail" ></render-template>
                </div>
              </template>
              <template #footer>
                <div class="data-bottom">
                  <span>总访问人数：</span>
                  <span>176人</span>
                </div>
              </template>
            </data-card>
          </div>
        </template>
      </draggable>
    </div>
    <lines-chart/>
  </div>
</template>

<script setup lang="ts">
import LinesChart from './components/LineChart.vue'
import DataCard from './components/DataCard.vue'
import draggable from 'vuedraggable'
import { h, nextTick, Ref, ref, render } from "vue";
import { CountTo } from "../../components/CountTo/index.ts";
import {renderIcon} from "../../utils/render";
import { RenderTemplate } from "../../components/renderTemplate";

import {
  CaretUpOutlined,
  CaretDownOutlined,
  UsergroupAddOutlined,
  BarChartOutlined,
  ShoppingCartOutlined,
  AccountBookOutlined,
  CreditCardOutlined,
  MailOutlined,
  TagsOutlined,
  SettingOutlined,
} from '@vicons/antd';

const dataList: Ref<any[]> = ref([
  {
    id: 0, name: '日访问量', type: 'success', num: 115, detail: () => {
      return h('div',{ class:'compared' },[
        h('span',{ class:'' },'对比昨日:'),
        h('span',{ style:{'color':'red'} },'+5'),
        h(CaretUpOutlined,{ style:{'width':'10px','height':'10px','color':'red','margin-left':'5px'} }),
      ])
    }
  },
  { id: 1, name: '日成交量', type: 'warning', prefix: '￥', num: 4981 },
  { id: 2, name: '日订单量', type: 'success', num: 40 },
  { id: 3, name: '取消订单量', type: 'error', num: 3 }
])

function dataRefresh(id: number) {
  let index = dataList.value.findIndex(item => item.id === id)
  let oldNum = dataList.value[index]?.num;
  dataList.value[index].num = 0;
  nextTick(() => {
    dataList.value[index].num = oldNum + 5;
  })
}

</script>

<style lang="scss" scoped>
.fade-move {
  transition: transform 0.5s;
}

.ghost {
  opacity: 0.5;
  background: #2b2b2b;
}

.data-container {
  width: 100%;
  font-size: 0;
  @media screen and (max-width: 1200px) {
    height: 380px;
    padding-bottom: 20px;
  }
  @media screen and (min-width: 1200px) {
    height: 190px;
  }
  @media screen and (max-width: 400px) {
    height: 750px;
  }

  box-sizing: border-box;
  padding-bottom: 10px;

  .data-container-item {
    display: inline-block;
    margin-right: 1%;
    padding-bottom: 10px;
    @media screen and (max-width: 1200px) {
      width: 49%;
      height: 50%;
      margin-right: 1%;
    }
    @media screen and (min-width: 1200px) {
      height: 100%;
      width: 24%;
    }
    @media screen and (max-width: 400px) {
      height: 24%;
      width: 100%;
    }

    .data-card {
      width: 100%;
      height: 100%;

      .data-number {
        font-size: 28px;
        font-weight: 500;
        height:55px;
        .compared {
          font-size: 12px;
          font-weight: 500;
        }
      }
      .data-bottom{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
      }
    }
  }

  .data-container-item:last-child {
    margin-right: 0;
  }
}
</style>

